<template>
  <div>
    <el-form :inline="true" class="search-form" label-width="100px" size="medium" style="padding-bottom: 10px;">
      <el-form-item label="基本信息：">
        <el-select v-model="res.params.marketId" placeholder="请选择市场" clearable>
          <el-option v-for="item in res.marketOptions" :key="item.marketId" :label="item.marketName" :value="item.marketId">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="querySubmit('isSearch')">查询</el-button>
        <el-button icon="el-icon-circle-plus-outline" @click="addSubmit">新增</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="res.tableOptions" size="medium" border stripe class="imp-table" v-loading="res.loading">
      <el-table-column label="道闸编号" prop="gateCode" width="150" align="center"></el-table-column>
      <el-table-column label="道闸名称" prop="gateName" width="250" align="center"></el-table-column>
      <el-table-column label="所属市场" prop="market.marketName"></el-table-column>
    </el-table>
    <div class="footer">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="pageSize" :current-page="pageIndex" layout="total, sizes, prev, pager, next, jumper" :total="res.pageTotal">
      </el-pagination>
    </div>
    <addModules :params="addParams" @hanleCloseFn="hanleCloseFn" v-if="addParams.show" />
  </div>
</template>

<script>
  import addModules from './addModules.vue'
  export default {
    data () {
      return {
        imageUrl: window.imageUrl,
        res: {
          marketOptions: [],
          tableOptions: [],
          params: {
            date: []
          },
          loading: false,
          pageTotal: 0
        },
        pageIndex: 1,
        pageSize: 20,
        addParams: {
          show: false
        }
      }
    },
    components: {
      addModules
    },
    created () {
      this.$store.commit('getMarketOptions', this.res)
      this.querySubmit()
    },
    methods: {
      hanleCloseFn () {
        this.addParams.show = false
        this.res.params.marketId = ''
        this.querySubmit()
      },
      handleSizeChange (val) {
        this.pageSize = val
        this.queryReset()
      },
      handleCurrentChange (val) {
        this.pageIndex = val
        this.queryReset()
      },
      querySubmit (isSearch) {
        if (isSearch) this.pageIndex = 1
        this.queryNum()
        this.queryReset()
      },
      queryReset () {
        this.res.loading = true
        this.$axios.get(this.$api.getGateList, {
          params: {
            marketId: this.res.params.marketId ? this.res.params.marketId : '',
            pageIndex: this.pageIndex,
            pageSize: this.pageSize
          }
        }).then((res) => {
          this.res.loading = false
          this.res.tableOptions = res.data.result
        })
      },
      queryNum () {
        this.$axios.get(this.$api.getGateNum, {
          params: {
            marketId: this.res.params.marketId ? this.res.params.marketId : '',
            pageIndex: this.pageIndex,
            pageSize: this.pageSize
          }
        }).then((res) => {
          this.res.pageTotal = res.data.result.total
        })
      },
      addSubmit () {
        this.addParams.show = true
      }
    }
  }
</script>
